<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>鼠标经过图片放大效果</title>
	<style type="text/css">
		* {
			margin:0;
			padding:0;
		}
		body {
			font-family:Verdana, Arial, Helvetica, sans-serif; 
			font-size:12px;
		}
		img {
			border:0
		}
		p {
			font-size:14px;
		}
		#imgmove li {
			float:left; 
			width:50px; 
			height:40px; 
			display:block; 
			overflow:visible;
			*overflow:hidden; 
			margin:0px 5px; 
			border:3px #333 solid; 
			position:relative;
			*position:static;
		}
		#imgmove a img {
			position:absolute;
			left:0px;top:0px;
			clip:rect(0px 50px 40px 0px);
			z-index: 0;*position:static;
		}
		#imgmove a:hover {
			border:none 
		}
		#imgmove a:hover img {
			position:relative; 
			left:-3px; top:-3px; 
			border:3px #f00 solid; 
			z-index:2; clip:rect(0px 137px 137px 0px);
		}
	</style>
</head>
<body>
	把鼠标移动到缩略图上面看效果
	<ul id="imgmove">
	  <li>
		  <a href="<#ZC_BLOG_HOST#>?cat=1">
		     <img src="image/img1.jpg"   style="cursor:pointer;"/>
		  </a>
	  </li>
	  <li>
		  <a href="<#ZC_BLOG_HOST#>?cat=2">
		     <img src="image/img2.jpg"  style="cursor:pointer;"/>
		  </a>
	  </li>
	  <li>
		  <a href="<#ZC_BLOG_HOST#>?cat=10">
		     <img src="image/img3.jpg"  style="cursor:pointer;"/>
		  </a>
	  </li>
	</ul>
</body>
</html>